﻿<!DOCTYPE html>
<html>
<head>
    <title>Lava:  Contacts</title>
    <link href='http://fonts.googleapis.com/css?family=Carrois+Gothic' rel='stylesheet' type='text/css'>
    <link href='../css/demos.css' rel='stylesheet' type='text/css'>
    <link href='../css/contacts.css' rel='stylesheet' type='text/css'>
    <script src="../scripts/lava.js" type="text/javascript"></script>
    <!--Templates-->
    <script type="text/html" id="contact-template">      
        <div class="contact-item-selected" data-bind="{if: [i].selected, click: {bind: ContactController.viewContact, args: {item: [i]}}}">
            <span data-bind="{text: [i].fullName}"></span>
        </div>
        <div class="contact-item" data-bind="{ifnot: [i].selected, click: {bind: ContactController.viewContact, args: {item: [i]}}}">
            <span data-bind="{text: [i].fullName}"></span>
        </div>      
    </script>
    <script type="text/html" id="contact-detail-template">
        <div class="actions-container">
            <img id="new-contact-btn" src="../images/new.png" data-bind="{click: ContactController.changeToCreateMode}" title="New Contact" />
            <button id="delete-contact-btn" class="red" data-bind="{click: ContactController.deleteContact}" title="Delete Contact">x</button>
        </div>
        <div class="clear-10"></div>
        <img data-bind="{src: ContactController.currentContact.photo}" height="80px" />
        <div class="clear-10"></div>
        <input type="text" data-bind="{value: ContactController.currentContact.firstName}" placeholder="First Name" />
        <input type="text" data-bind="{value: ContactController.currentContact.lastName}" placeholder="Last Name" />
        <input type="text" data-bind="{value: ContactController.currentContact.email}" placeholder="Email" />
        <input type="text" data-bind="{value: ContactController.currentContact.phone}" placeholder="Phone" />
        <input type="text" data-bind="{value: ContactController.currentContact.photo}" placeholder="Photo" />
        <button id="contact-action-btn" class="gray" data-bind="{text: ContactController.mode, click: ContactController.contactAction}"></button>
    </script>
</head>
<body>
    <div class="content">
        <h1 id="header">Contacts</h1>
        <div class="left-panel">
            <ul data-bind="{foreach: {bind: ContactController.contacts, template: 'contact-template'}}"></ul>
        </div>
        <div class="right-panel" data-bind="{template: 'contact-detail-template'}"></div>
    </div>
    <script type="text/javascript">
        // model
        var Contact = Lava.Object({
            firstName: '',
            lastName: '',
            email: '',
            phone: '',
            photo: '../images/photo.png',
            selected: false,
            fullName: Lava.Computed(function () {
                return this.firstName + ' ' + this.lastName;
            })
        });

        // controller
        var ContactController = Lava.Controller({
            mode: 'Create',
            contacts: [],
            currentContact: Contact.clone(),
            viewContact: function (e, args) {
                this.currentContact.sync(args.item);
                this.contacts.forEach(function (item) {
                    item.selected = false;
                });
                args.item.selected = true;
                this.mode = 'Save';
            },
            changeToCreateMode: function (e) {
                this.mode = 'Create';
                this.currentContact.sync(Contact.clone());
                this.contacts.forEach(function (item) {
                    item.selected = false;
                });
            },
            contactAction: function () {
                if(this.mode == 'Create') {
                    this.contacts.add(Contact.clone().sync(this.currentContact));
                    this.contacts.forEach(function (item) {
                        item.selected = false;
                    });
                    this.contacts[this.contacts.length - 1].selected = true;
                }
                else if (this.mode == 'Save') {
                    this.contacts.forEach(function (item) {
                        if(item.selected) {
                            item.sync(ContactController.currentContact);
                            item.selected = true;
                        }
                    });
                }
            },
            deleteContact: function () {
                for (var i = 0; i < this.contacts.length; i++) {
                    var item = this.contacts[i];
                    if(item.selected) {
                        this.contacts.remove(item);
                        break;
                    }
                }
                this.changeToCreateMode();
            }
        });

        // add an initial contact
        ContactController.contacts.add(Contact.clone({ firstName: 'Terry', lastName: 'Phillips', photo: 'http://m.c.lnkd.licdn.com/mpr/mpr/shrink_80_80/p/4/000/132/172/156209b.jpg' }));
    </script>
</body>
</html>
